<template>
	<div class="zaishoushangpinpaixu" style=" color: rgb(2, 12, 29); font-size: 0.24rem; background: #f6f8fb; width: 100vw; overflow: hidden;">
    <mtop></mtop>
    <div style="padding: 0.3rem 0; background: #fff; padding-bottom: 1rem;">

      <div v-for="(item, index) in list1" :key="item.title" style="border-bottom: 1px solid rgb(227, 232, 241); padding: 0.2rem 0.2rem;">
        <div class="flexbc">
          <div class="flexc">
            <div style="width: 0.6rem; text-align: center;"></div>
            <div style="width: 4rem;">
              <div style="overflow: hidden; text-overflow:ellipsis; white-space: nowrap; margin-bottom: 0.2rem;">{{item.title}}</div>
              <div class="flexc">
                <div style="color: rgb(175, 179, 188);">{{item.created_at}}</div>
                <div style="margin-left: 0.2rem; color: rgb(254, 61, 61);">佣金：{{item.commission}}元</div>
              </div>
            </div>
          </div>
          <div class="flexc">
            <div style="background: rgb(254, 61, 61); border-radius: 4px; padding: 0.05rem 0.1rem;  color: rgb(255, 255, 255); font-size: 12px; margin-left: 0.1rem;" class="flexcc" v-if="item.is_main == 1">已主推</div>
            <!-- <div style="background: rgb(254, 61, 61); border-radius: 4px; padding: 0.05rem 0.1rem;  color: rgb(255, 255, 255); font-size: 12px; margin-left: 0.1rem;" class="flexcc" @click="xiugai(item,'zhutui')" v-if="item.is_main == 1">主推</div> -->
            <div style="background: rgb(0, 90, 255); border-radius: 4px; padding: 0.05rem 0.1rem; color: rgb(255, 255, 255); font-size: 12px; margin-left: 0.1rem;" class="flexcc" v-if="item.is_top">已置顶</div>
            <!-- <div style="background: rgb(0, 90, 255); border-radius: 4px; padding: 0.05rem 0.1rem; color: rgb(255, 255, 255); font-size: 12px; margin-left: 0.1rem;" class="flexcc" @click="xiugai(item,'zhiding')" v-if="!item.is_top">置顶</div> -->
            <img src="../../../static/mimg/n25.png" style="width: 0.5rem; margin-left: 0.2rem;">
          </div>
        </div>
      </div>

      <draggable v-model="list2" @update="updateSort" :options="{ delay: 100,animation:500 }" chosenClass="cs" dragClass="cs" >
        <transition-group name="fade" tag="ul">
          <div v-for="(item, index) in list2" :key="item.title" style="border-bottom: 1px solid rgb(227, 232, 241); padding: 0.2rem 0.2rem;">
            <div class="flexbc">
              <div class="flexc">
                <div style="width: 0.6rem; text-align: center;">{{index+1}}</div>
                <div style="width: 4rem;">
                  <div style="overflow: hidden; text-overflow:ellipsis; white-space: nowrap; margin-bottom: 0.2rem;">{{item.title}}</div>
                  <div class="flexc">
                    <div style="color: rgb(175, 179, 188);">{{item.created_at}}</div>
                    <div style="margin-left: 0.2rem; color: rgb(254, 61, 61);">佣金：{{item.commission}}元</div>
                  </div>
                </div>
              </div>
              <div class="flexc">
                <div style="background: rgb(254, 61, 61); border-radius: 4px; padding: 0.05rem 0.1rem;  color: rgb(255, 255, 255); font-size: 12px; margin-left: 0.1rem;" class="flexcc" v-if="item.is_main == 1">已主推</div>
                <div style="background: rgb(0, 90, 255); border-radius: 4px; padding: 0.05rem 0.1rem; color: rgb(255, 255, 255); font-size: 12px; margin-left: 0.1rem;" class="flexcc" v-if="item.is_top">已置顶</div>
                <img src="../../../static/mimg/n25.png" style="width: 0.5rem; margin-left: 0.2rem;">
              </div>
            </div>
          </div>
        </transition-group>
      </draggable>
    </div>
    <div style="position: fixed; left: 0; bottom: 0; width: 100%; box-shadow: 0px -10px 20px 0px rgba(0, 0, 0, 0.05); background: rgb(255, 255, 255);">
      <mfooter></mfooter>
    </div>
	</div>

</template>

<script>
  import mtop from '../mtop.vue'
  import mfooter from '../mfooter.vue'
  import draggable from 'vuedraggable';
	export default {
		name: 'zaishoushangpinpaixu',
    components:{
      mtop,mfooter,draggable
    },
		data() {
			return {
        list:[],
        list1:[],
        list2:[],
        search:{
          status:100,
          page_size:300
        }
			}
		},
		created() {


		},
		mounted() {
      if(window.screen.width < 1080){
        var h = document.documentElement.clientWidth / 7.5 + 'px';
        document.documentElement.style.fontSize = h;

        this.getlist()
      }else{
        this.getlist()
      }
		},
		methods: {

      xiugai:function(item,val){
        if(val == 'zhiding'){
          item.is_top = moment().unix()
        }
        if(val == 'buzhiding'){
          item.is_top = 0
        }
        if(val == 'zhutui'){
          item.is_main = 1
        }
        if(val == 'buzhutui'){
          item.is_main = 0
        }
        axios.post('/agent/page/update',item).then((response)=>{
        	if (response.data.msg.code == 0) {

            this.$message.success('设置成功');
            this.getlist()

        	} else {
        		this.$message.error(response.data.msg.info);
        	}
        })
      },

      updateSort:function(val){

        let arr = []
        this.list2.forEach((item,index)=>{
          let obj = {
            order_page_id:item.id,
            sort:index+1
          }
          arr.push(obj)
        })

        axios.post('/agent/page/sort',{data:arr}).then((response)=>{
        	if (response.data.msg.code == 0) {
            this.getlist()
        	} else {
        		this.$message.error(response.data.msg.info);
        	}
        })
      },
      getlist:function(){
        axios.get('/agent/page/list',{params:this.search}).then((response)=>{
        	if (response.data.msg.code == 0) {
            this.list = response.data.data.data
            console.log(1)
            this.list1 = []
            this.list2 = []
            if(this.list.length > 0){

              this.list.forEach(item=>{
                if(item.is_top){
                  this.list1.push(item)
                }else{
                  this.list2.push(item)
                }
              })
            }
        	} else {
        		this.$message.error(response.data.msg.info);
        	}
        })
      },

		}
	}
</script>


<style scoped lang="less">
  .sortable-ghost{ background: #eaeaea;}
</style>
